<template>
  <div class="over-bg">
    <div class="banner flex align-center js-st">
      <div class="text-left banner-text">
        <div class="tit share-color">
          {{
            isHosting ? $t("hosting.robotHosting") : $t("header.wealthTreasure")
          }}
        </div>
        <div class="share-color font-20">{{ $t("newTheme.zeroRisk") }}</div>
      </div>
      <!-- <img src="@/assets/theme1/defibanner.png" alt="" class="phone-img" /> -->
    </div>
    <div class="teble second-bg">
      <div class="flex align-center js-sp p-title">
        <div class="flex align-center">
          <div class="title">
            {{
              isHosting ? $t("hosting.myHosting") : $t("financial.myFinancial")
            }}
          </div>
          <div class="ml-12 back point" @click="beBack">{{ $t("goBack") }}</div>
          <svg-icon
            @click="beBack"
            data-_icon-name="ic_back_mining"
            class="text-20 ml-5 point back-icon"
          ></svg-icon>
        </div>
      </div>
      <div class="flex align-center js-st type1-p mt-8">
		  <div
		    class="mr-20 wealth-tab  text-14 text-bolder point"
		    :class="state.active === 0 ? 'active-wealth text-login' : 'color_98'"
		    @click="changeManagementType(0)"
		  >
		    {{ $t("hosting.InHosting") }}
		  </div>
		  <div
		    class="mr-20 wealth-tab  text-14 text-bolder point"
		    :class="state.active === 1 ? 'active-wealth text-login' : 'color_98'"
		    @click="changeManagementType(1)"
		  >
		    {{ $t("legal.completed") }}
		  </div>
        <div
          class="mr-20 wealth-tab  text-14 text-bolder point"
          :class="state.active === 2 ? 'active-wealth text-login' : 'color_98'"
          @click="changeManagementType(2)"
        >
          {{ $t("hosting.shuhui") }}
        </div>
      </div>
      <div class="type1-p">
        <div class="type-table ">
          <!-- <MyWealth
            @getAll="getAll"
            :listParam="state.list_param"
            :isHosting="isHosting"
            @changeType="changeType"
            @refresh="refresh"
            :active="state.active"
            @getArraryLength="getArraryLength"
          /> -->
		  <div class="flex js-st header" style="border-bottom: 1px solid #eaecef;">
			  <div>{{$t('legal.buyAmount')}}</div>
			  <div>{{$t('financial.dailyRate')}}</div>
			  <div>{{$t('legal.buyTime')}}</div>
			  <div>{{$t('hosting.shengyu')}}</div>
			  <div v-if="state.active == 0">{{$t('assets.operate')}}</div>
		  </div>
		  <div class="flex js-st header" v-if="currencylist.length > 0" v-for="(item,index) in currencylist" :key="index">
			  <div>{{item.number}}({{item.currency_name}})</div>
			  <div>{{(item.type.rate * 100).toFixed(2)}}%</div>
			  <div>{{item.created_at}}</div>
			  <div>{{item.days}}</div>
			  <div v-if="state.active == 0" class="hbtns" @click="shuhuis(item)">{{$t('newCoin.SubscriptionSettlement')}}</div>
		  </div>
		  <div v-if="currencylist.length == 0" style="padding-bottom: 40px;">
		    <Norecord />
		  </div>
        </div>
        <div
          class="text-center more-text point"
          @click="nextPage"
          v-if="pages < totalpages"
        >
          <span>{{
            pages >= totalpages
              ? $t("financial.noMoreRecords")
              : $t("financial.expandMore")
          }}</span
          ><i
            class="el-icon-arrow-down text-16 ml-5"
            color="#C1C1C1"
            v-if="pages < totalpages"
          ></i>
        </div>
      </div>
    </div>
	
	<el-dialog
	    v-model="dialogVisibles"
	    :title="$t('newCoin.SubscriptionSettlement')"
	    width="500"
	  >
	    <span>{{$t('hosting.shifoushuhui')}}</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisibles = false">Cancel</el-button>
	        <el-button type="primary" @click="shuhui()">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	</el-dialog>
	
  </div>
</template>

<script>
import MyWealth from "@/components/wealthTreasure/myWealth.vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { reactive, onMounted, computed,ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter } from "@/utils/common";
import { formatDate } from "@/utils/times";
import { getcurrencylist,getredeem } from "@/api/user"
import { ElMessageBox,ElMessage } from 'element-plus'
// import {  userActiveDefiPage } from "@/api/wealth";
// import { ElMessage } from "element-plus";
// import { useI18n } from "vue-i18n";

export default {
  components: { MyWealth,Norecord },
  setup() {
    // const { t } = useI18n();
    const $store = useStore();
    const $router = useRouter();
    const state = reactive({
      active: 0,
      activeName: 1,
      dialogVisible: false,
      list_param: { limit: 10, page: 0 },
      currentPage: 0,
      tableData: [],
      loading: false,
      tipVisible: false,
      isMine: false,
      isAll: false,
      miningInfo: {},
      assetsData: {},
      successInfo: {},
      hasCurrency: 0,
      listLength: 0,
    });
    //是否是托管1理财宝2托管
    const isHosting = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "wealth_management_type") {
          if (ele.value === 2) {
            flag = true;
          }
        }
      });
      return flag;
    });
    const islogin = computed(() => {
      return $store.state.user.token ? true : false;
    });
    const getAll = (val) => {
      state.isAll = val;
    };
    const nextPage = () => {
      if (!state.isAll) {
        state.list_param.page = state.list_param.page + 1;
      }
    };
    const changeType = (val) => {
      state.list_param.page = 0;
      state.list_param.order_status = val;
    };
    const changeManagementType = (val) => {
      state.active = val;
	  pages.value = 1
	  currencylist.value = []
	  getcurrencylists()
    };
    //跳转登录
    const toLogin = () => {
      $router.push("/login");
    };
    const beBack = () => {
      $router.push("/wealthFinancial");
    };
    const refresh = () => {
      state.list_param.page = 0;
    };
    //
    // 获取资产信息
    onMounted(() => {
		getcurrencylists()
	});
	
	const currencylist = ref([])
	const pages = ref(1)
	const totalpages = ref(1)
	const getcurrencylists = () => {
		let data = {
			page:pages.value,
			limit:20,
			status:state.active
		}
		getcurrencylist(data).then((res) => {
			if(res.code == 1){
				currencylist.value = [...currencylist.value,...res.data.data]
				totalpages.value = res.data.last_page
			}
		})
	}
	const selectitem = ref([])
	const shuhuis = (e) => {
		selectitem.value = e
		dialogVisibles.value = true
	}
	const shuhui = () => {
		let data = {
			id:selectitem.value.id,
		}
		getredeem(data).then((res) => {
			dialogVisibles.value = false
			if(res.code == 1){
				ElMessage.success(res.msg);
				pages.value = 1
				currencylist.value = []
				getcurrencylists()
			}else{
				ElMessage.error(res.msg);
			}
		})
	}
	
	const dialogVisibles = ref(false)
	
    //判断列表是否有数据
    const getArraryLength = (val) => {
      state.listLength = val;
    };
    return {
      getArraryLength,
      state,
      islogin,
      decimalDigitsInputFilter,
      getAll,
      nextPage,
      toLogin,
      beBack,
      formatDate,
      changeType,
      refresh,
      changeManagementType,
      isHosting,
	  
	  //新
	  currencylist,
	  pages,
	  totalpages,
	  dialogVisibles,
	  selectitem,
	  shuhuis,
	  shuhui
    };
  },
};
</script>

<style lang="less" scoped>
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mt-21 {
  margin-top: 21px;
}
.mt-9 {
  margin-top: 9px;
}
.red-text {
  color: #ff6a6a;
  font-weight: bold;
  line-height: 15px;
}
.currency-text {
  // color: #3771e2;
  font-weight: bold;
  line-height: 15px;
}
.day-text {
  color: #121212;
  font-weight: bold;
  line-height: 15px;
}
.color-1e {
  color: #121212;
}
.font-14 {
  font-size: 14px;
  line-height: 20px;
}
.font-10 {
  font-size: 10px;
  line-height: 14px;
  color: #989898;
}
.p-16 {
  padding: 16px 0;
  border-top: 1px solid #eaecef;
  border-bottom: 1px solid #eaecef;
}
.btn {
  width: 120px;
  height: 32px;
  line-height: 32px;
  margin-inline-end: 30px;
}
.empty-btn {
  width: 170px;
  height: 46px;
  line-height: 46px;
  margin: 0 auto 60px;
}
.l-10 {
  line-height: 10px;
}
.mr-8 {
  margin-inline-end: 8px;
}
.text-20 {
  font-size: 20px;
}
.mr-6 {
  margin-inline-end: 6px;
}
.teble {
  width: 100%;
  border-radius: 10px;
  margin: 0 auto 60px;
}
.type-table {
  border-radius: 10px;
  border: 1px solid #eaecef;
  overflow: hidden;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #121212;
}
@media (max-width: 1439px) {
  .p-title {
    padding: 48px 80px 0;
  }
  .type1-p {
    padding: 28px 80px 0;
  }
}
@media (min-width: 1440px) {
  .p-title {
    padding: 48px 160px 0;
  }
  .type1-p {
    padding: 28px 160px 0;
  }
}
.banner {
  width: 100%;
  height: 430px;
  background: #f4f7f9;
  background-image: url("../../assets/defibanner.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.banner-text {
  padding-inline-start: 24.3%;
}
.mt-8 {
  margin-top: 8px;
}
.mr-20 {
  margin-inline-end: 20px;
}
.wealth-tab {
  padding: 2px 4px;
}
.active-wealth {
  background: @tab-active;
  border-radius: 4px;
}
.phone-img {
  width: 324px;
  height: 100%;
  display: block;
  margin-inline-start: 164px;
}
.tit {
  font-style: normal;
  font-weight: 900;
  font-size: 36px;
  line-height: 50px;
  margin-bottom: 14px;
}
.main-color {
  color: #12575f;
}
.font-20 {
  font-size: 20px;
  line-height: 28px;
}
.title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #121212;
}
.mining-right {
  height: 36px;
  padding: 8px 10px;
  background: #3d67fa;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}
.color-60 {
  color: rgba(255, 255, 255, 0.6);
}
.color-98 {
  color: #989898;
}
.dialog-box {
  padding: 5px 5px 10px;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #424344;
}
.w_50 {
  width: 50%;
}
.el-table__row .table-rowheight:last-child td {
  border-bottom: 1px solid #fff;
}
.tips {
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #989898;
}
.color-2e {
  color: @blue;
}
.bg-bule {
  background: @blue;
}
.bg-gray {
  background: #c1c1c1;
}
.btns {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  width: 165.64px;
  height: 46px;
  border-radius: 4px;
}
.tip-btn {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  height: 46px;
  border-radius: 4px;
}
.ml-4 {
  margin-inline-start: 4px;
}
.ml-12 {
  margin-inline-start: 12px;
}
.mb-4 {
  margin-bottom: 4px;
}
.rules-text {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #c1c1c1;
}
.ml-5 {
  margin-inline-start: 5px;
}
.status {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin-bottom: 12px;
}
.status-tip {
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #60ad76;
}
.toright {
  width: 58.5px;
  height: 6px;
  display: inline-block;
  margin: -10px 9px 0;
}
.pool-icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin-bottom: 8px;
}
.back {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: @blue;
}
.more-text {
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #c1c1c1;
  padding: 22px;
  border: 1px solid #eaecef;
  border-top: none;
}
.wealth-box {
  padding: 21px 32px 30px;
  box-sizing: border-box;
  width: 47%;
  margin-inline-end: 20px;
  background: #ffffff;
  border: 1px solid #eaecef;
  box-sizing: border-box;
  border-radius: 10px;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #888888;
}
.wealth-box:nth-child(2n) {
  margin-inline-end: 0px;
}
.wealth-tit {
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaecef;
}
// .main-color {
//   color: #3d67fa;
// }
.wealth-btn {
  min-width: 120px;
  padding: 13px 32px;
  box-sizing: border-box;
  height: 46px;
  background: @blue;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
}
.progress .el-progress-bar__inner {
  background: @progress;
}
.header{
	font-size: 16px;
}
.header div{
	flex: 1;
	height: 46px;
	line-height: 46px;
}
.hbtns{
	color: #e54b4b;
	background-color: rgba(229, 75, 75, 0.1);
	cursor: pointer;
}
</style>
<style>
.home .el-table .el-table__row:last-child td {
  border: none;
}
</style>
